<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Pixelated Image</title>
  <style>
    body {
  padding: 0;
  height:100%;
  text-align: center;
  background-color: #ffc655;
  font-family: "Roboto Mono",monospace;
  font-weight: 400;
}
#img{
  width: 400px;
  margin: auto;
}
  </style>
</head>

<body>
<h1 style="font-size:40px; text-align: center; color: white;">Pixelated Image</h1>
  <img id="img" src="../assets/Images/pixelated-img/pixel-img.jpg" />

  <script>
    let c = document.createElement("canvas");
    ctx = c.getContext('2d');
    let img1 = new Image();

    img1.onload = function () {
      document.getElementById("img").remove();

      w = img1.width;
      h = img1.height;

      c.width = w;
      c.height = h;
      ctx.drawImage(img1, 0, 0);

      var pixelArr = ctx.getImageData(0, 0, w, h).data;
      sample_size = 40;

      for (let y = 0; y < h; y += sample_size) {
        for (let x = 0; x < w; x += sample_size) {
          let p = (x + (y*w)) * 4;
          ctx.fillStyle = "rgba(" + pixelArr[p] + "," + pixelArr[p + 1] + "," + pixelArr[p + 2] + "," + pixelArr[p + 3] + ")";
          ctx.fillRect(x, y, sample_size, sample_size);
        }
      }

      let img2 = new Image();
      img2.src = c.toDataURL("image/jpeg");
      img2.width = 800;
      document.body.appendChild(img2);
    };

    img1.src = document.getElementById("img").src;

  </script>
</body>

</html>